প্যারালাক্স স্ক্রলিং (Srallax Scrolling) ওয়েব ডিজাইনের একটি জনপ্রিয় টেকনিক, যা ব্যাকগ্রাউন্ড এবং কন্টেন্টের গতির মধ্যে পার্থক্য তৈরি করে। JavaScript এবং jQuery এর মাধ্যমে এটি সহজেই ওয়েবপেজে অ্যাপ্লাই করা যায়। এখানে আমরা JavaScript এবং jQuery ব্যবহার করে Srallax Scrolling কিভাবে সেটআপ করবেন তা আলোচনা করব।
Srallax Scrolling কীভাবে কাজ করে?
প্যারালাক্স স্ক্রলিংয়ের মূল ধারণা হলো, যখন ব্যবহারকারী স্ক্রল করে, তখন ব্যাকগ্রাউন্ড এবং কন্টেন্ট ভিন্ন গতিতে স্ক্রল হয়। এর মাধ্যমে একটি 3D ইফেক্ট তৈরি হয় এবং ওয়েবপেজে গভীরতা যোগ করা হয়।
JavaScript এবং jQuery এর মাধ্যমে Srallax Scrolling
১. HTML স্ট্রাকচার
প্রথমত, আমরা একটি সিম্পল HTML স্ট্রাকচার তৈরি করব, যেখানে প্যারালাক্স স্ক্রলিং প্রভাব দেখানো হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Srallax Scrolling with JavaScript and jQuery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="parallax">
<div class="content">
<h1>Welcome to Parallax Scrolling</h1>
<p>Scroll to see the effect.</p>
</div>
</section>
<section class="content-section">
<h2>Normal Content</h2>
<p>This section contains normal content. Scroll down to see the parallax effect in action.</p>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
এখানে একটি <section> তৈরি করা হয়েছে যার ক্লাস parallax এবং এর মধ্যে একটি content ডিভ রয়েছে, যা স্ক্রল করার সময় প্যারালাক্স ইফেক্ট দেখাবে।
২. CSS স্টাইলিং (styles.css)
এখন, CSS দিয়ে প্যারালাক্স ইফেক্টের জন্য প্রয়োজনীয় স্টাইলিং করা হবে।
/* styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
height: 2000px; /* To enable scrolling */
}
/* Parallax Section */
.parallax {
position: relative;
height: 100vh; /* 100% of the viewport height */
background-image: url('background.jpg'); /* Add your background image */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.parallax .content {
color: white;
z-index: 2;
}
/* Content Section */
.content-section {
background-color: #f4f4f4;
padding: 20px;
text-align: center;
}
এখানে .parallax ক্লাসে background-attachment: fixed ব্যবহার করা হয়েছে, যা ব্যাকগ্রাউন্ডের স্ক্রলিং গতি নিয়ন্ত্রণ করবে এবং এটি স্ক্রলিংয়ের সময় ফিক্সড অবস্থায় থাকবে।
৩. JavaScript/jQuery কোড (script.js)
এখন JavaScript এবং jQuery ব্যবহার করে স্ক্রলিংয়ের সময় ব্যাকগ্রাউন্ড পজিশন পরিবর্তন করতে হবে। এটি করতে নিচের কোডটি ব্যবহার করা হবে:
// script.js
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".parallax").css("background-position", "center " + (scroll * 0.5) + "px");
});
});
এখানে, scrollTop() মেথড ব্যবহার করে স্ক্রলিং অবস্থান ট্র্যাক করা হচ্ছে। তারপর, $(".parallax").css("background-position") কোডের মাধ্যমে ব্যাকগ্রাউন্ড পজিশন পরিবর্তন করা হচ্ছে। 0.5 এর মানটি ব্যাকগ্রাউন্ডের গতি স্লো করার জন্য ব্যবহৃত হয়েছে।
৪. ফলস্বরূপ
এখন আপনার পেজে প্যারালাক্স স্ক্রলিং ইফেক্ট কার্যকরী হবে। আপনি যখন স্ক্রল করবেন, তখন ব্যাকগ্রাউন্ড ইমেজটি কন্টেন্টের তুলনায় ধীরে স্ক্রল হবে, এবং এটি একটি গভীরতার অনুভূতি তৈরি করবে।
অতিরিক্ত কাস্টমাইজেশন
- ব্যাকগ্রাউন্ড ইমেজের গতি: আপনি 0.5 এর মানটি পরিবর্তন করে ব্যাকগ্রাউন্ড ইমেজের গতি নিয়ন্ত্রণ করতে পারেন। উদাহরণস্বরূপ, যদি আপনি চাচ্ছেন ব্যাকগ্রাউন্ড আরও ধীরে চলুক, তাহলে আপনি 0.3 ব্যবহার করতে পারেন।
- অ্যানিমেশন: আপনি আরও কিছু অ্যানিমেশন যুক্ত করতে পারেন, যেমন ব্যাকগ্রাউন্ডের সাইজ পরিবর্তন বা স্কেলে পরিবর্তন করা, যাতে প্যারালাক্স ইফেক্ট আরও ডাইনামিক হয়।
সারাংশ
এই কোডের মাধ্যমে আপনি সহজেই JavaScript এবং jQuery ব্যবহার করে ওয়েবপেজে Srallax Scrolling (Parallax Scrolling) ইফেক্ট যুক্ত করতে পারবেন। এটি ওয়েবসাইটে একটি চিত্তাকর্ষক এবং ইন্টারঅ্যাকটিভ অনুভূতি যোগ করে, যা ব্যবহারকারীদের অভিজ্ঞতাকে আরও উন্নত করে।
Srallax Scrolling (বা Parallax Scrolling) ইফেক্ট ওয়েব ডিজাইনে আকর্ষণীয় এবং ডাইনামিক উপস্থাপনা তৈরি করতে ব্যবহৃত হয়। jQuery লাইব্রেরি ব্যবহার করে প্যারালাক্স স্ক্রলিং ইফেক্ট আরও সহজ এবং কার্যকরী করা যেতে পারে। এখানে আমরা দেখবো কিভাবে jQuery লাইব্রেরি ইন্টিগ্রেট করে একটি সিম্পল প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করা যায়।
jQuery লাইব্রেরি ইন্টিগ্রেশন
যেহেতু jQuery এক ধরনের JavaScript লাইব্রেরি, এটি ওয়েবপেজের ইন্টারঅ্যাকশন এবং ডাইনামিক কন্টেন্টের জন্য সহজে কাজ করে। jQuery ব্যবহার করে প্যারালাক্স স্ক্রলিং খুবই সহজ এবং দ্রুত করা যায়।
Srallax Scrolling এর জন্য jQuery কোড
এখানে একটি উদাহরণ দেয়া হলো, যেখানে jQuery ব্যবহার করে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করা হয়েছে।
১. HTML কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Scrolling with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Parallax Section -->
<section class="parallax">
<div class="content">
<h1>Welcome to Parallax Scrolling!</h1>
<p>This is an example of Srallax (Parallax) scrolling effect using jQuery.</p>
</div>
</section>
<section class="normal-content">
<h2>Normal Content</h2>
<p>This section is normal content. Scroll down to see the parallax effect.</p>
</section>
<script src="script.js"></script>
</body>
</html>
২. CSS কোড (styles.css)
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
/* Parallax Section */
.parallax {
position: relative;
height: 100vh; /* 100% of viewport height */
background-image: url('your-image.jpg'); /* Add your background image */
background-attachment: fixed;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
}
.parallax .content {
z-index: 2;
}
.normal-content {
background-color: #f4f4f4;
padding: 40px;
text-align: center;
}
৩. jQuery কোড (script.js)
$(document).ready(function() {
// When the user scrolls
$(window).scroll(function() {
var scrollPosition = $(window).scrollTop();
// Adjust the background position to create the parallax effect
$('.parallax').css('background-position', 'center ' + (scrollPosition * 0.5) + 'px');
});
});
কোডের ব্যাখ্যা
- HTML:
- একটি
parallaxক্লাসের সেকশন তৈরি করা হয়েছে, যেখানে প্যারালাক্স স্ক্রলিং ইফেক্ট দেখানো হবে। normal-contentক্লাসের সেকশনটি সাধারণ কন্টেন্ট হিসেবে যোগ করা হয়েছে, যাতে প্যারালাক্স স্ক্রলিং এর প্রভাব স্পষ্টভাবে দেখা যায়।
- একটি
- CSS:
.parallaxক্লাসেbackground-attachment: fixed;ব্যবহার করা হয়েছে, যা ব্যাকগ্রাউন্ড ইমেজকে স্ক্রলিংয়ের সময় স্থির রাখবে।background-position: center;এবংbackground-size: cover;ব্যাকগ্রাউন্ডের সঠিক সাইজ এবং পজিশন নিয়ন্ত্রণ করবে।height: 100vh;ব্যবহার করা হয়েছে, যাতে ব্যাকগ্রাউন্ড পুরো viewport এর উচ্চতা নিতে পারে এবং স্ক্রলিংয়ের সময় প্রভাবটি স্পষ্টভাবে দেখা যায়।
- jQuery:
$(window).scroll()ফাংশন স্ক্রল ইভেন্ট ট্র্যাক করবে। স্ক্রল পজিশনের উপর ভিত্তি করে.parallaxক্লাসের ব্যাকগ্রাউন্ড পজিশন পরিবর্তন করা হয়, যাতে স্ক্রলিংয়ের সময় প্যারালাক্স ইফেক্ট তৈরি হয়।scrollPosition * 0.5ব্যাকগ্রাউন্ডের গতির পার্থক্য তৈরি করবে। এটি ব্যাকগ্রাউন্ডের গতিকে কমিয়ে ধীর করে দেয়, যার ফলে প্যারালাক্স ইফেক্টটি তৈরি হয়।
উপসংহার
এই কোডের মাধ্যমে আপনি jQuery ব্যবহার করে সহজে প্যারালাক্স স্ক্রলিং ইফেক্ট ওয়েবসাইটে যোগ করতে পারেন। jQuery লাইব্রেরি ওয়েব ডিজাইনকে সহজ এবং কার্যকরী করতে সহায়তা করে, এবং এটি স্ক্রলিং ইভেন্ট এবং বিভিন্ন ভিজ্যুয়াল ইফেক্টের জন্য খুবই জনপ্রিয় একটি টুল।
প্যারালাক্স স্ক্রলিং একটি ওয়েব ডিজাইন টেকনিক, যেখানে স্ক্রলিংয়ের সময় ব্যাকগ্রাউন্ড ইমেজ এবং কন্টেন্ট আলাদা গতিতে স্ক্রল হয়। এই ইফেক্টটি একটি ত্রিমাত্রিক (3D) অনুভূতি তৈরি করে, যা ওয়েব পেজকে আরও ডাইনামিক এবং ইন্টারঅ্যাকটিভ করে তোলে। JavaScript এর মাধ্যমে এই ইফেক্ট তৈরি করা বেশ সহজ এবং এটি আপনার পেজে আকর্ষণীয় ভিজ্যুয়াল ইফেক্ট যোগ করতে সাহায্য করে।
JavaScript দিয়ে ব্যাকগ্রাউন্ড ইমেজের মুভমেন্ট তৈরি
JavaScript ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজের মুভমেন্ট কনফিগার করা হয় স্ক্রল ইভেন্টের মাধ্যমে। এই ইফেক্টটি স্ক্রল করার সময় ব্যাকগ্রাউন্ডের পজিশন পরিবর্তন করে, ফলে ইমেজ ধীরে স্ক্রল হয় অন্য কন্টেন্টের তুলনায়।
১. HTML স্ট্রাকচার
প্রথমে আপনার HTML ফাইলের ভিতর একটি সাধারণ স্ট্রাকচার তৈরি করুন যেখানে প্যারালাক্স স্ক্রলিং ইফেক্ট দেখানো হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Scrolling with JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax"></div> <!-- Parallax Section with Background -->
<div class="content">
<h1>Welcome to Parallax Scrolling</h1>
<p>Scroll down to see the effect</p>
</div>
<div class="parallax"></div> <!-- Another Parallax Section -->
<script src="script.js"></script> <!-- JavaScript File -->
</body>
</html>
২. CSS স্টাইলিং
এখন আমরা CSS দিয়ে আমাদের ওয়েব পেজের ডিজাইন তৈরি করব, যাতে ব্যাকগ্রাউন্ড ইমেজ সঠিকভাবে প্রদর্শিত হয় এবং প্যারালাক্স ইফেক্ট পরিষ্কারভাবে দেখা যায়।
/* styles.css */
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.parallax {
position: relative;
background-image: url('your-image.jpg'); /* Replace with your background image */
height: 100vh; /* Full height of the viewport */
background-attachment: fixed; /* Keeps the background fixed while scrolling */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
text-align: center;
padding: 20px;
background-color: white;
}
৩. JavaScript দিয়ে ব্যাকগ্রাউন্ড ইমেজের মুভমেন্ট
এখন আসল কাজটি হল JavaScript দিয়ে ব্যাকগ্রাউন্ডের পজিশন পরিবর্তন করা যখন ব্যবহারকারী স্ক্রল করে। নিচে একটি সহজ উদাহরণ দেওয়া হল:
// script.js
window.addEventListener('scroll', function() {
var scrollPosition = window.pageYOffset; // Get the current scroll position
var parallax = document.querySelector('.parallax'); // Select the parallax element
// Change the background position based on the scroll position
parallax.style.backgroundPosition = 'center ' + (scrollPosition * 0.5) + 'px';
});
ব্যাখ্যা:
- window.addEventListener('scroll', function() {...}): এই লাইনটি স্ক্রল ইভেন্টটি শোনে। যখনই ব্যবহারকারী স্ক্রল করবে, এই ফাংশনটি ট্রিগার হবে।
- window.pageYOffset: এটি স্ক্রল পজিশন (স্ক্রলিং এর দূরত্ব) বের করতে ব্যবহৃত হয়।
- parallax.style.backgroundPosition: এটি ব্যাকগ্রাউন্ডের পজিশন পরিবর্তন করে।
scrollPosition * 0.5মানে হল, ব্যাকগ্রাউন্ড ইমেজের গতি কন্টেন্টের তুলনায় ধীরে হবে।
৪. প্রভাব
এই কোডটি ব্যবহার করার পর, আপনি দেখতে পাবেন যে ব্যাকগ্রাউন্ড ইমেজ স্ক্রল করার সময় ধীরে ধীরে চলে এবং এটি কন্টেন্টের তুলনায় আলাদা গতিতে স্ক্রল হয়। এর ফলে একটি প্যারালাক্স ইফেক্ট তৈরি হয় যা ওয়েবসাইটের ডিজাইনকে আরও ডাইনামিক এবং আকর্ষণীয় করে তোলে।
৫. অতিরিক্ত কাস্টমাইজেশন
- বিভিন্ন সেকশনে বিভিন্ন গতির প্যারালাক্স: আপনি যদি বিভিন্ন সেকশনে ভিন্ন গতির প্যারালাক্স ইফেক্ট চান, তাহলে আপনি প্রতি
.parallaxক্লাসের জন্য আলাদা আলাদা স্ক্রল গতি নির্ধারণ করতে পারেন।
var parallax1 = document.querySelector('#parallax1');
parallax1.style.backgroundPosition = 'center ' + (scrollPosition * 0.3) + 'px';
var parallax2 = document.querySelector('#parallax2');
parallax2.style.backgroundPosition = 'center ' + (scrollPosition * 0.7) + 'px';
- গ্রাফিক্স অপটিমাইজেশন: প্যারালাক্স স্ক্রলিং ইফেক্ট ব্যবহারের সময় ব্যাকগ্রাউন্ড ইমেজের সাইজ এবং কোয়ালিটি উপযুক্ত হতে হবে। উচ্চ রেজোলিউশনের ইমেজ ব্যবহার করা ভাল, তবে এটি ওয়েব পেজের লোডিং স্পিডে প্রভাব ফেলতে পারে।
সারাংশ
JavaScript দিয়ে প্যারালাক্স স্ক্রলিং তৈরি করা খুবই সহজ এবং ডাইনামিক ইফেক্ট প্রদান করে। স্ক্রল ইভেন্ট ট্র্যাক করে ব্যাকগ্রাউন্ডের পজিশন পরিবর্তন করে এই ইফেক্ট সৃষ্টি করা হয়, যা ওয়েব পেজকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে। আপনি আপনার ওয়েব পেজের ডিজাইন এবং কনটেন্টের সাথে এই স্ক্রলিং ইফেক্টটি কাস্টমাইজ করতে পারেন, যাতে এটি আরও সুবিধাজনক ও দৃষ্টিনন্দন হয়।
প্যারালাক্স স্ক্রলিং (Srallax Scrolling) ওয়েব ডিজাইনে একটি অত্যন্ত জনপ্রিয় ইফেক্ট, যা ব্যাকগ্রাউন্ড এবং কন্টেন্টের মধ্যে গতির পার্থক্য সৃষ্টি করে। এটি একটি ত্রিমাত্রিক অনুভূতি তৈরি করে এবং ওয়েবপেজের স্ক্রলিং অভিজ্ঞতাকে আরও ডাইনামিক ও আকর্ষণীয় করে তোলে। jQuery প্লাগিন ব্যবহার করে এই ইফেক্ট সহজেই ওয়েবপেজে যোগ করা যায়।
এখানে আমরা জনপ্রিয় jQuery প্লাগিনগুলির সাহায্যে কিভাবে Srallax Scrolling ইফেক্ট তৈরি করা যায় তা দেখব।
jQuery প্লাগিন ব্যবহার করে Srallax Scrolling
১. Rellax.js প্লাগিন ব্যবহার করা
Rellax.js একটি হালকা, সহজ এবং দ্রুত কাজ করার মতো jQuery প্লাগিন, যা প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে ব্যবহৃত হয়। এটি ব্যাকগ্রাউন্ডে গভীরতা তৈরি করে এবং স্ক্রলিংয়ের সাথে উপাদানগুলোর গতির পার্থক্য সৃষ্টি করে।
ধাপ ১: Rellax.js প্লাগিন ইনস্টল করা
প্রথমে Rellax.js প্লাগিনটি ইনক্লুড করুন আপনার HTML ফাইলে। এটি CDN বা লোকালি ইনস্টল করা যেতে পারে।
<!-- Rellax.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/rellax@1.12.1/rellax.min.js"></script>
ধাপ ২: HTML কোড
আপনার HTML ফাইলে প্যারালাক্স স্ক্রলিং ইফেক্ট যোগ করার জন্য, আপনি যে এলিমেন্টে এই ইফেক্ট প্রয়োগ করবেন তা নির্দিষ্ট করতে হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Scrolling Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax" data-rellax-speed="5">
<h1>Welcome to Parallax Scrolling</h1>
</div>
<div class="content">
<p>Scroll down to see the effect.</p>
</div>
<div class="parallax" data-rellax-speed="3">
<h1>Another Parallax Section</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/rellax@1.12.1/rellax.min.js"></script>
<script src="script.js"></script>
</body>
</html>
ধাপ ৩: CSS কোড
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.parallax {
height: 500px;
background: url('background.jpg') no-repeat center center fixed;
background-size: cover;
position: relative;
text-align: center;
color: white;
}
.content {
padding: 20px;
text-align: center;
background-color: #f4f4f4;
}
ধাপ ৪: JavaScript কোড
এখন Rellax.js প্লাগিনটিকে ইনিশিয়ালাইজ করতে JavaScript কোড যোগ করুন।
// script.js
var rellax = new Rellax('.parallax');
এখানে, data-rellax-speed অ্যাট্রিবিউটের মাধ্যমে আপনি প্রতিটি প্যারালাক্স এলিমেন্টের গতির মান নির্ধারণ করতে পারেন। এর মান যত বেশি হবে, স্ক্রল করার সময় ব্যাকগ্রাউন্ড তত ধীরে চলবে।
২. Parallax.js প্লাগিন ব্যবহার করা
Parallax.js প্লাগিনটি আরও একটি জনপ্রিয় টুল যা প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরির জন্য ব্যবহৃত হয়। এটি খুব সহজ এবং স্বয়ংক্রিয়ভাবে স্ক্রলিং ইফেক্ট প্রয়োগ করে।
ধাপ ১: Parallax.js প্লাগিন ইনস্টল করা
প্রথমে Parallax.js প্লাগিনটি ইনক্লুড করুন।
<!-- Parallax.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/parallax.js@3.1.0/parallax.min.js"></script>
ধাপ ২: HTML কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Example</title>
</head>
<body>
<div class="parallax-window" data-parallax="scroll" data-image-src="background.jpg">
<h1>Parallax Scrolling Effect</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/parallax.js@3.1.0/parallax.min.js"></script>
<script src="script.js"></script>
</body>
</html>
ধাপ ৩: JavaScript কোড
// script.js
var scene = document.getElementById('parallax-scene');
var parallax = new Parallax(scene);
এখানে, data-parallax="scroll" অ্যাট্রিবিউটের মাধ্যমে আপনি প্যারালাক্স স্ক্রলিং প্রভাবটি সক্রিয় করেন এবং data-image-src এর মাধ্যমে ব্যাকগ্রাউন্ড চিত্র নির্ধারণ করেন।
৩. ScrollMagic প্লাগিন ব্যবহার করা
ScrollMagic একটি শক্তিশালী লাইব্রেরি যা স্ক্রলিং ইভেন্টে কাস্টম অ্যানিমেশন এবং প্যারালাক্স স্ক্রলিং তৈরি করতে ব্যবহৃত হয়। এটি বিভিন্ন ইফেক্ট তৈরি করতে অনেক বেশি কাস্টমাইজযোগ্য।
ধাপ ১: ScrollMagic প্লাগিন ইনস্টল করা
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollmagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollmagic/2.0.7/plugins/animation.gsap.js"></script>
ধাপ ২: HTML কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScrollMagic Example</title>
</head>
<body>
<div class="parallax">
<h1>ScrollMagic Parallax Effect</h1>
</div>
<script src="script.js"></script>
</body>
</html>
ধাপ ৩: JavaScript কোড
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: ".parallax",
triggerHook: "onEnter",
duration: "100%"
})
.setTween(".parallax", {backgroundPosition: "center 100%", ease: Linear.easeNone})
.addTo(controller);
এই কোডের মাধ্যমে, প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করা হয়, এবং ScrollMagic লাইব্রেরি স্ক্রল ইভেন্টের সাথে ইফেক্টটির গতির পরিবর্তনকে ট্র্যাক করে।
সারাংশ
jQuery প্লাগিন ব্যবহারের মাধ্যমে প্যারালাক্স স্ক্রলিং সহজেই ওয়েবপেজে প্রয়োগ করা যায়। Rellax.js, Parallax.js, এবং ScrollMagic এর মতো প্লাগিনগুলি ওয়েব ডিজাইনে আকর্ষণীয় স্ক্রলিং ইফেক্ট তৈরি করতে সাহায্য করে, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে এবং ওয়েবসাইটকে আরও ইন্টারঅ্যাকটিভ করে তোলে।
Srallax.js একটি জনপ্রিয় JavaScript লাইব্রেরি, যা প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে ব্যবহৃত হয়। এটি সহজে ওয়েবসাইটের ব্যাকগ্রাউন্ড বা কন্টেন্টের মধ্যে গতির পার্থক্য তৈরি করে, যা একটি গভীরতা এবং ডাইনামিক ইফেক্ট তৈরি করে। Srallax.js লাইব্রেরি ইন্টিগ্রেট করে আপনি সহজেই প্যারালাক্স স্ক্রলিং প্রজেক্টে উন্নত ইফেক্ট এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা যুক্ত করতে পারবেন।
Srallax.js লাইব্রেরি ইন্টিগ্রেশন
Srallax.js লাইব্রেরি ইন্টিগ্রেট করার জন্য প্রথমে লাইব্রেরি ডাউনলোড করতে হবে অথবা CDN থেকে যুক্ত করতে হবে।
১. Srallax.js লাইব্রেরি ডাউনলোড এবং ইন্টিগ্রেশন
Srallax.js লাইব্রেরি ইন্টিগ্রেট করতে আপনি CDN ব্যবহার করতে পারেন অথবা সরাসরি ফাইলটি ডাউনলোড করে আপনার প্রজেক্টে যুক্ত করতে পারেন।
CDN ব্যবহার করে:
<head>
<script src="https://cdn.jsdelivr.net/npm/srallax.js"></script>
</head>
এছাড়া আপনি লাইব্রেরিটি ডাউনলোড করে আপনার প্রজেক্ট ফোল্ডারে রাখতে পারেন এবং তারপর <script> ট্যাগের মাধ্যমে এটি লিঙ্ক করতে পারেন:
<head>
<script src="path/to/srallax.min.js"></script>
</head>
২. HTML ফাইলের প্রস্তুতি
Srallax.js লাইব্রেরি কাজ করার জন্য আপনাকে HTML ফাইলে এমন কিছু এলিমেন্ট তৈরি করতে হবে, যার উপর প্যারালাক্স ইফেক্ট প্রয়োগ করা হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Scrolling with Srallax.js</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/srallax.js"></script>
</head>
<body>
<div class="parallax-container">
<div class="parallax-background"></div>
<div class="content">
<h1>Welcome to Parallax Scrolling</h1>
<p>This is a simple example of Srallax.js in action!</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
৩. CSS ফাইল তৈরি
/* styles.css */
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.parallax-container {
position: relative;
height: 100vh; /* Full height */
overflow: hidden;
}
.parallax-background {
background-image: url('your-image.jpg');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* Send background to back */
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
font-size: 2em;
}
Srallax.js ব্যবহার
Srallax.js লাইব্রেরি ইন্টিগ্রেট করার পর, JavaScript কোডের মাধ্যমে এটি সক্রিয় করতে হবে।
৪. JavaScript ফাইল তৈরি
// script.js
document.addEventListener('DOMContentLoaded', function() {
const srallax = new Srallax({
element: '.parallax-background', // Target the element to apply parallax
speed: 0.5, // Control the speed of scrolling effect
});
// Initialize the parallax effect
srallax.init();
});
Srallax.js এর কাস্টমাইজেশন
Srallax.js লাইব্রেরিতে আপনি কিছু কাস্টমাইজেশন করতে পারেন, যেমন:
- speed: প্যারালাক্স স্ক্রলিংয়ের গতি নিয়ন্ত্রণ করে। এটি ০ থেকে ১ পর্যন্ত মান নিতে পারে, যেখানে ১ বেশি গতি এবং ০ ধীর গতি নির্দেশ করে।
- direction: প্যারালাক্স স্ক্রলিংয়ের দিক নির্ধারণ করতে পারে। এটি 'vertical' অথবা 'horizontal' হতে পারে।
Srallax.js এর অতিরিক্ত বৈশিষ্ট্য
- Responsive: Srallax.js ওয়েবসাইটের রেসপন্সিভ ডিজাইনের সঙ্গে সহজেই কাজ করতে পারে। এটি বিভিন্ন স্ক্রীন সাইজের জন্য উপযুক্ত।
- Multiple Elements: একাধিক এলিমেন্টের উপর প্যারালাক্স ইফেক্ট প্রয়োগ করা যায়। যেমন, একাধিক ব্যাকগ্রাউন্ড ইমেজ বা কন্টেন্ট ব্লকগুলোর উপর।
- Event Triggers: কিছু ইভেন্ট ট্রিগার সেট করে বিশেষ ফিচার যোগ করা যেতে পারে, যেমন স্ক্রল করা অবস্থায় বিভিন্ন অ্যানিমেশন চালানো।
সারাংশ
Srallax.js লাইব্রেরি প্যারালাক্স স্ক্রলিং ইফেক্টকে সহজ করে তোলে এবং এটি ওয়েবসাইটে ডাইনামিক এবং আকর্ষণীয় অভিজ্ঞতা সৃষ্টি করে। লাইব্রেরিটি সহজেই ইন্টিগ্রেট করা যায় এবং JavaScript ও CSS এর মাধ্যমে কাস্টমাইজ করা সম্ভব। Srallax.js ব্যবহার করে আপনি আপনার ওয়েবসাইটে একাধিক কাস্টম প্যারালাক্স ইফেক্ট যুক্ত করতে পারবেন, যা আপনার সাইটের ভিজ্যুয়াল ইফেক্ট এবং ইউজার এক্সপিরিয়েন্সকে আরও উন্নত করবে।
Read more
